<template>
  <div class="list-table">
    <!--<div class="area-header">-->
    <!--  <span v-show="!btnHide" class="area-header-title">{{ $t('关键条款') }}</span>-->
    <!--</div>-->
    <div style="display: flex;align-items: center;justify-content: flex-start;">
      <el-form ref="queryForm" :model="queryParams" :inline="true">
        <el-form-item :label="$t('条款类型')" prop="type">
          <el-select v-model="queryParams.type" clearable :placeholder="$t('条款类型')" @change="queryHandle">
            <el-option
              v-for="dict in typeOptions"
              :key="dict.dictValue"
              :label="$t(dict.dictLabel)"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <!--<el-form-item :label="$t('提醒人')" prop="remindUserIdStr">-->
        <!--  <UserSelect v-model="queryParams.remindUserIdStr" :placeholder="$t('提醒人')" />-->
        <!--</el-form-item>-->
        <!--<el-form-item v-show="!btnHide" :label="$t('关联合同')" prop="associatedContract">-->
        <!--  <el-select v-model="queryParams.associatedContract" value="" :placeholder="$t('关联合同')" filterable clearable>-->
        <!--    <el-option-->
        <!--      v-for="(item, index) in associatedContractDict"-->
        <!--      :key="index"-->
        <!--      :label="item.name"-->
        <!--      :value="item.id"-->
        <!--    />-->
        <!--  </el-select>-->
        <!--</el-form-item>-->
        <!--<el-form-item>-->
        <!--  <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>-->
        <!--  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>-->
        <!--</el-form-item>-->
      </el-form>
      <div v-if="!btnHide" style="margin-top: -8px;margin-left: 20px;">
        <el-button
          v-hasPermi="[hasPermi + ':edit']"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addHandle('')"
        >{{ $t('新增') }}
        </el-button>
        <el-button v-hasPermi="[hasPermi + ':edit']" icon="el-icon-download" size="mini" @click="exportHandle">
          {{ $t('导出') }}
        </el-button>
        <el-button v-hasPermi="[hasPermi + ':edit']" icon="el-icon-setting" size="mini" @click="openReminder">
          {{ $t('默认提醒人') }}
        </el-button>
      </div>
    </div>

    <!--<el-row v-if="!btnHide" :gutter="10" class="mb8">-->
    <!--  <el-col :span="1.5">-->
    <!--    <el-button-->
    <!--      v-hasPermi="['deal:terms:edit']"-->
    <!--      type="primary"-->
    <!--      icon="el-icon-plus"-->
    <!--      size="mini"-->
    <!--      @click="addHandle('')"-->
    <!--    >{{ $t("新增") }}</el-button>-->
    <!--  </el-col>-->
    <!--  <el-col :span="1.5">-->
    <!--    <el-button-->
    <!--      v-hasPermi="['deal:terms:export']"-->
    <!--      type="warning"-->
    <!--      icon="el-icon-download"-->
    <!--      size="mini"-->
    <!--      @click="exportHandle"-->
    <!--    >{{ $t("导出") }}</el-button>-->
    <!--  </el-col>-->
    <!--  <el-col :span="1.5">-->
    <!--    <el-button-->
    <!--      v-hasPermi="['deal:terms:view']"-->
    <!--      type="success"-->
    <!--      icon="el-icon-setting"-->
    <!--      size="mini"-->
    <!--      @click="openReminder"-->
    <!--    >{{ $t("默认提醒人") }}</el-button>-->
    <!--  </el-col>-->
    <!--</el-row>-->

    <div v-if="!isEmpty(dealContractTermsList)">
      <div v-for="(v, k) in dealContractTermsList" :key="k" v-loading="loading" class="mb10">
        <div class="term-tit" style="cursor: pointer;">
          {{ $t(typeFormat(k)) }}<i class="add-round" @click="addHandle(k)" />
        </div>
        <div v-for="j in v" :key="j.id" class="term-remark pointer" :class="j.isTrigger">
          <div
            class="remark"
            style="cursor: pointer;"
            @click="updateHandle(j)"
            v-html="j.remark"
          />
          <div class="bottom">
            <div class="left" style="cursor: pointer;" @click="updateHandle(j)">
              <span class="tag" :class="j.isTrigger">{{ $t(isTriggerDict(j.isTrigger)) }}</span>
              <span>
                {{ $t('提醒时间') }}: {{ parseTime(j.remindTime, '{y}-{m}-{d} {h}:{i}') || '无' }}
              </span>
              <span>
                {{ $t('提醒人') }}: {{ j.userName || '无' }}
              </span>
              <span>
                {{ $t('关联合同') }}: {{ j.contractName || '无' }}
              </span>
            </div>
            <i class="el-icon-delete" style="cursor: pointer;" @click="deleteHandle(j)" />
          </div>
        </div>
      </div>
    </div>
    <div v-else style="margin-top: 20px;min-height: 450px;" class="noneData">
      <div v-loading="loading">
        <svg-icon icon-class="none" class-name="none-icon" />
        <p>{{ $t('暂无数据') }}</p>
      </div>
    </div>

    <!-- 添加或修改关键条款对话框 -->
    <el-dialog
      :title="$t(title)"
      :visible.sync="dealTermsOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class="dialogForm"
      append-to-body
    >
      <dealContractTermsForm ref="dealContractTermsForm" :has-permi="hasPermi" />
    </el-dialog>

    <el-dialog
      :title="$t(title)"
      :visible.sync="dealTermsReminderOpen"
      width="600"
      style="height: 350px; width: 600px; margin: auto !important;"
      :close-on-click-modal="false"
      custom-class="dialogForm"
      append-to-body
    >
      <dealTermsReminder ref="dealTermsReminder" :has-permi="hasPermi" />
    </el-dialog>
  </div>
</template>

<script>
import { delDealContractTerms, findListTreeTerms } from '@/api/deal/terms/dealTerms'
import { findByActStatusAndDealId } from '@/api/deal/contract/dealContract'
import dealContractTermsForm from './dealTermsForm.vue'
import dealTermsReminder from '@/views/deal/terms/reminder/dealTermsReminder.vue'

export default {
  components: {
    dealTermsReminder,
    dealContractTermsForm
  },
  props: {
    hasPermi: {
      type: String,
      default: () => 'deal:contract',
      required: true
    }
  },
  data() {
    return {
      dealTermsReminderOpen: false,
      associatedContractDict: [],
      // 字典类型
      typeOptions: [],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 关键条款表格数据
      dealContractTermsList: [],
      // 弹出层标题
      title: '关键条款',
      // 是否显示弹出层
      dealTermsOpen: false,
      // 查询参数
      queryParams: {
        dealId: this.$route.query.id,
        parentId: undefined,
        type: undefined,
        remindTime: undefined,
        remindUserIdStr: undefined,
        associatedContract: undefined
        // pageNum: 1,
        // pageSize: 10
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      isTriggerOption: [],
      // 保存按钮隐藏
      btnHide: ''
    }
  },
  created() {
    this.getDicts('key_terms_status').then(response => {
      this.isTriggerOption = response.data
    })
    findByActStatusAndDealId(this.$route.query.id).then(response => {
      this.associatedContractDict = response.data
    })
  },
  mounted() {
    this.getList()
  },
  methods: {
    /** 查询关键条款列表 */
    getList() {
      if (this.queryParams.dealId) {
        this.loading = true
        console.log(this.queryParams)
        findListTreeTerms(this.queryParams).then(response => {
          this.dealContractTermsList = response.data
          // 先从url里获取是那种项目, 获取不到在查表
          var dealType = this.$route.query.dealType
          this.getDictDealType(dealType)
          this.loading = false
        })
      }
    },
    // 不同位置展示不同条款类型
    getDictDealType(dealType) {
      // 股权, 债权 条款类型
      if (dealType === 'bf') {
        this.getDicts('key_terms_type_bf').then(response => {
          this.typeOptions = response.data
        })
      } else {
        // 参股基金条款类型
        this.getDicts('key_terms_tyoe').then(response => {
          this.typeOptions = response.data
        })
      }
    },
    // 禁用所有操作按钮
    disableActionButtons() {
      this.btnHide = true
    },
    // 类型字典回显
    typeFormat(row) {
      return this.selectDictLabel(this.typeOptions, row)
    },
    isTriggerDict(value) {
      var datas = this.isTriggerOption
      var actions = []
      Object.keys(datas).map((key) => {
        if (datas[key].dictValue === ('' + value)) {
          var temp = datas[key].dictLabel
          actions.push(this.$t(this.isEmpty(temp) ? '' : temp.replace('触发-', '')))
          return false
        }
      })
      return actions.join('')
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        type: undefined,
        remindTime: undefined,
        remindUserId: undefined,
        remindUserIdStr: undefined,
        associatedContract: undefined,
        remark: undefined,
        createBy: undefined,
        updateBy: undefined,
        createTime: undefined,
        updateTime: undefined,
        delFlag: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      // this.queryParams.remindUserIdStr = []
      this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle(type) {
      console.log(type)
      this.dealTermsOpen = true
      this.$nextTick(() => {
        this.$refs.dealContractTermsForm.btnHide = this.btnHide
        this.$refs.dealContractTermsForm.init(null)
        if (type) {
          this.$refs.dealContractTermsForm.form.type = type
        }
      })
    },
    /** 修改按钮操作 */
    updateHandle(row, status) {
      this.dealTermsOpen = true
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.dealContractTermsForm.init(row)
        this.$refs.dealContractTermsForm.btnHide = this.btnHide
        if (status === 'view') {
          this.$refs.dealContractTermsForm.btnHide = true
        } else {
          this.$refs.dealContractTermsForm.btnHide = false
        }
      })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(function() {
        return delDealContractTerms(row.id)
      }).then(() => {
        this.getList()
        this.msgSuccess(this.$t('删除成功'))
      }).catch(function() {
      })
    },
    /** 导出按钮操作 */
    exportHandle() {
      this.queryParams.dealType = this.$route.query.dealType
      this.downLoadExcel('/terms/dealContractTerms/export', this.queryParams)
    },
    // 设置默认提醒人
    openReminder() {
      this.dealTermsReminderOpen = true
      this.title = '默认提醒人'
      this.$nextTick(() => {
        this.$refs.dealTermsReminder.init()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.term-remark.YCL {
  border-left: 5px solid rgba(20, 178, 200, 1);

  .YCL {
    border: 1px solid rgba(20, 178, 200, 1);
    color: rgba(20, 178, 200, 1);
    padding: 2px 7px;
    border-radius: 15px;
    font-size: 11px;
  }
}

.term-remark.WCF {
  border-left: 5px solid rgba(67, 78, 184, 1);

  .WCF {
    border: 1px solid rgba(67, 78, 184, 1);
    color: rgba(67, 78, 184, 1);
    padding: 2px 7px;
    border-radius: 15px;
    font-size: 11px;
  }
}

.term-remark.WCL {
  border-left: 5px solid rgba(219, 90, 82, 1);

  .WCL {
    border: 1px solid rgba(219, 90, 82, 1);
    color: rgba(219, 90, 82, 1);
    padding: 2px 7px;
    border-radius: 15px;
    font-size: 11px;
  }
}

.term-remark.SX {
  border-left: 5px solid rgba(153, 153, 153, 1);

  .SX {
    border: 1px solid rgba(153, 153, 153, 1);
    color: rgba(153, 153, 153, 1);
    padding: 2px 7px;
    border-radius: 15px;
    font-size: 11px;
  }
}

.term-tit {
  font-size: 15px;
  color: #333;
  text-align: left;
  padding-right: 16px;
  font-weight: 600;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  column-gap: 7px;

  i {
    height: 30px;
    width: 30px;
  }
}

.term-remark {
  position: relative;
  margin-bottom: 15px;
  overflow: hidden;
  border: 1px solid rgba(235, 238, 248, 1);
  border-radius: 6px;
  padding: 15px;

  .remark {
    line-height: 20px;
    font-size: 13px;
    color: rgba(51, 51, 51, 1);
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-width: 100%;
    word-wrap: break-word;
  }
}

.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  border-top: 1px solid rgba(235, 238, 248, 1);
  padding-top: 10px;

  .left {
    color: #888888;
    font-size: 12px;

    span {
      margin-right: 10px;
    }
  }

  .el-icon-delete {
    color: rgba(230, 0, 19, 1);
    font-weight: bold;
    border: 2px solid rgba(27, 31, 40, .1);
    border-radius: 50%;
    padding: 4px;
    font-size: 12px;
    cursor: pointer;
  }
}

.mt10 {
  margin-top: 10px;
}
</style>
